import React from 'react';
import {NavLink, useNavigate} from "react-router-dom";

const FunRoute = () => {
    /**
     * react - router: cnpm install react - router - dom
     *  理解:
     *       1. react - router是 React 的一个插件库，专门用来实现一个SPA（单页面）应用
     *       2. 路由两种模式：historyRouter hashRouter
     *       3. 路由就是一个映射关系(key:value) key为路由路径, value可能是function/component
     *
     *  作用：
     *       1. 通过路由映射关系，动态渲染不同的组件。
     *       2. 实现页面导航、嵌套路由、路由传参等功能。
     *
     *  SPA:（single page web application，SPA）
     *       1. 整个应用只有一个完整的页面(public-->index.html)
     *       2. 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求新页面。
     *       3. 当点击路由链接时, 只会做页面的局部更新，网址也会对应的改变
     */

    const navigate = useNavigate()
    return (
        <div>
            <h1>首页</h1>
            {/*
                query传递参数 刷新数据不会丢失。获取到的都是字符串。传递对象不方便
                    1- to属性的值即是点击导航跳转至的路由地址
                    2- 如果A路由切换至B路由：首先会将A路由组件卸载，然后加载B路由组件
                    3- 将参数放置在查询字符串中。刷新数据不会丢失。获取到的都是字符串。传递对象不方便
            */}
            <NavLink to={"/one?id=1&type=2"}>one</NavLink>
            <hr></hr>
            <button onClick={() => {
                navigate("/one")
            }}>编程式导航 ==> /one
            </button>
            <hr></hr>

            {/*
                 state传递参数:
                     1- 传递的数据类型灵活。刷新页面数据不会丢失，但重新打开该页面会丢失
                     2- 使用 state 传递的参数不会出现在 URL 中，因此无法直接通过 URL 分享给其他人
            */}
            <NavLink to={"/three"} state={{
                userName: "zhangsan1",
                age: 12
            }}>State1 ==> /three</NavLink>
            <hr></hr>

            {/*
                 params传递参数:
                    params传递参数的方法是将数据放置在地址中。
            */}
            <NavLink to={"/one/team/123"}>params ==> /two</NavLink>

        </div>
    );
};

export default FunRoute;